iT邦幫忙

DAY 21
3

使用Jenkins打造.Net CI Server系列 第 21

CI Server 21 - 在每日建置中檢查JavaScript及Css

  • 分享至 

  • xImage
  •  

我們在學會如何使用JsLint以及CsLint檢查程式碼之後,
更進一步的是希望在我們每日建置時也能夠產生JsLint和CssLint的報表,
幫助我們了解目前專案中的程式碼是否還有潛在的問題,
在本篇文章中將向大家介紹,如何在整合JsLint及CssLint並顯示分析報表
※設定使用JsLint
由於JsLint是由JavaScript所撰寫而成,所以沒辦法直接在Command Line使用它來掃描我們的程式碼,
因此我們需要透過一些Wrapper的幫助,將JsLint透過Java或nodeJs來執行。
JsLint使用Java所開發的Wrapper為jslint4java,我們將使用它來進行程式碼分析

  1. 下載jslint4java,並放至C:\Program Files (x86)\Jslint\jslint4java-2.0.2.jar
    jslint4java - http://code.google.com/p/jslint4java/
  2. 打開Jenkins專案首頁,進入設定畫面
  3. 找到Build區段,新增執行window batch command
  4. 輸入CommandLine指令執行JsLint

@echo off
set jsFolder="%WORKSPACE%\CI-Sample.WebSite\Scripts\App\*.js"
set jslintPath="C:\Program Files (x86)\Jslint\jslint4java-2.0.2.jar"

mkdir .\JsLintReport
for %%x in (%jsFolder%) do java -jar %jslintPath% "%%x" --report xml > .\JsLintReport\%%~nx.xml

exit 0


5. 找到Report Violations區段,在JsLint輸入JsLintReport\*.xml

6. 回到專案並建置,可以看到出現JsLint報表

7. 點擊報表可以看到更多詳細的資料

※設定使用CssLint
接下來我們開始整合CssLint,由於CssLint是由node來執行,
所以我們一樣的透過batch指令來進行我們的掃描操作

  1. 安裝請參考前一篇文章
  2. 打開Jenkins專案首頁,進入設定畫面
  3. 找到Build區段,新增執行window batch command
  4. 輸入CommandLine指令執行CssLint

@echo off
set cssFolder="%WORKSPACE%\CI-Sample.WebSite\Content\themes\base\*.css"
set csslintPath="C:\Users\kirkchen\AppData\Roaming\npm\csslint.cmd"

mkdir .\CssLintReport
for %%x in (%cssFolder%) do %csslintPath% "%%x" --format=lint-xml > .\CssLintReport\%%~nx.xml

exit 0


5. 找到Report Violations區段,在CssLint輸入CssLintReport\*.xml

6. 回到專案並建置,可以看到出現CssLint報表


※JsLint和CssLint用MsBuild撰寫請參考https://github.com/kirkchen/CI-Sample/blob/master/BuildScript/Build.csproj
※總結
再加入JsLint和CssLint之後,不管是網站的前端或後端,
我們都可以利用Jenkins來進行品質管控,並且產生詳細的報表供開發人員參考,
透過提升版本控制系統程式碼,無形中也讓我們的專案更加的穩定且易於維護,
讓整個軟體開發流程進入一個正向的循環!
關於今天的內容,若有任何問題歡迎提出來一起討論 ^_^


上一篇
CI Server 20 - 使用JsLint及CssLint檢查語法正確性
下一篇
CI Server 22 - 使用Web Deployment Tool部署網站
系列文
使用Jenkins打造.Net CI Server30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

我要留言

立即登入留言